<template>
  <div>
    <article-templates :data="articleData">
      <template #article>
        <div>
          <title-card title="平台兼容性" />
          <table>
            <tr class="table-head">
              <td>Android</td>
              <td>Android CPU类型</td>
              <td>iOS</td>
            </tr>
            <tr class="table-content">
              <td>适用版本区间：6.0 - 11.0</td>
              <td>armeabi-v7a：未测试，arm64-v8a：未测试，x86：未测试</td>
              <td>x</td>
            </tr>
          </table>

          <title-card title="原生插件通用使用流程：" />
          <ol class="text-ol">
            <li>
              <span>购买插件，选择该插件绑定的项目。</span>
            </li>
            <li>
              <span
                >在HBuilderX里找到项目，在manifest的app原生插件配置中勾选模块，如需要填写参数则参考插件作者的文档添加。</span
              >
            </li>
            <li>
              <span
                >根据插件作者的提供的文档开发代码，在代码中引用插件，调用插件功能。</span
              >
            </li>
            <li>
              <span
                >打包自定义基座，选择插件，得到自定义基座，然后运行时选择自定义基座，进行log输出测试。</span
              >
            </li>
            <li>
              <span>开发完毕后正式云打包</span>
            </li>
          </ol>
          <p>付费原生插件目前不支持离线打包。</p>
          <p>Android 离线打包原生插件另见文档</p>
          <p>
            <a
              href="https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/android"
              target="_Blank"
              >https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/android</a
            >
          </p>
          <p>
            <span>iOS 离线打包原生插件另见文档</span>
            <a
              href="https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/ios"
              target="_Blank"
              >https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/ios</a
            >
          </p>
          <p>
            注意事项：使用HBuilderX2.7.14以下版本，如果同一插件且同一appid下购买并绑定了多个包名，提交云打包界面提示包名绑定不一致时，需要在HBuilderX项目中manifest.json->“App原生插件配置”->”云端插件“列表中删除该插件重新选择
          </p>

          <title-card title="使用插件示例：" />
          <pre-code style="margin-bottom: 10px" :code="code" language="xml" />
          <pre-code :code="code1" language="JavaScript" />
        </div>
      </template>
    </article-templates>
  </div>
</template>

<script setup name="MeaAppSystem">
import ArticleTemplates from '@/components/ArticleTemplates/index.vue';
import TitleCard from '@/components/TitleCard/index.vue';
import { postArticleDetail } from '@/api/home.js';
import { onMounted, ref, toRefs, reactive } from 'vue';

const data = reactive({
  articleData: {},
});
const { articleData } = toRefs(data);

const code = ref(`
<uses-permission android:name="android.permission.REORDER_TASKS" />
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />
<uses-permission android:name="android.permission.DISABLE_KEYGUARD" />
<uses-permission android:name="android.permission.WAKE_LOCK" />
`);
const code1 = ref(`// #ifdef APP-PLUS
const meaAppModule = uni.requireNativePlugin("MeaApp-System");// 引入插件;仅支持安卓
// #endif

canDrawOverlays(){
  let canDrawOverlays = meaAppModule.canDrawOverlays();
  console.log('-----------canDrawOverlays:'+canDrawOverlays);
},
//将自身应用从后台切换到前台；如果应用进程被杀掉了，则命令无效。
setTopApp(){
  //点击按钮后，迅速将App手动置于后台即可
  setTimeout(()=>{
    meaAppModule.setTopApp();
  },3000);
},
//点击按钮后，迅速锁屏即可
wakeupAndUnlock(){
  setTimeout(()=>{
    meaAppModule.wakeupAndUnlock(plus.android.runtimeMainActivity());
  },3000);
}`);

const getTitle = () => {
  postArticleDetail({
    route: 'MeaAppSystem',
  }).then((res) => {
    articleData.value = res.data;
  });
};
onMounted(() => {
  getTitle();
});
</script>

<style lang="scss" scoped>
.table-head {
  background: #eee;
  td {
    padding: 5px 20px;
  }
}
.table-content {
  td {
    text-align: left;
    padding: 5px 10px;
    border: 1px solid #000;
  }
}
.text-ol {
  span {
    font-size: 16px;
  }
}
</style>
